<template>
  <div>
    <Form ref="form" :rules="formValidate" :label-width="90" :model="form">
      <FormItem label="订单单号" prop="orderId">
        <Input type="number" v-model.number="form.orderId"  disabled style=" -webkit-text-fill-color:black; "  />
      </FormItem>
      <FormItem label="时间" prop="time">
        <DatePicker type="date" placeholder="Select date" style="width: 200px"></DatePicker>
      </FormItem>
      <FormItem label="消费金额" prop="totalPrice">
        <Input type="number" v-model.number="form.totalPrice"  disabled style="  -webkit-text-fill-color:deeppink;"/>
      </FormItem>
      <FormItem label="优惠金额" prop="discountPrice">
        <Input type="number" v-model.number="form.discountPrice"  placeholder=0 @on-change="setreceivablePrice"  />
      </FormItem>
      <FormItem label="应收金额" prop="receivablePrice">
        <Input type="number" v-model.number="form.receivablePrice" disabled style="  -webkit-text-fill-color:red;" />
      </FormItem>
      <FormItem label="付款方式" prop="payment">
        <RadioGroup v-model="form.payment">
          <Radio label="现金"></Radio>
          <Radio label="支付宝"></Radio>
          <Radio label="微信"></Radio>
          <Radio label="银联"></Radio>
        </RadioGroup>
      </FormItem>
      <FormItem label="实收金额" prop="paidInPrice">
        <Input  v-model.number="form.paidInPrice" disabled style="  -webkit-text-fill-color:black;" />
      </FormItem>
      <FormItem label="备注" prop="remark">
        <Input  placeholder="JenkinsId" v-model="form.remark" disabled/>
      </FormItem>
    </Form>
    <Row class="code-row-bg" justify="end" type="flex">
      <Button @click="cancel" style="margin-right:10px">取消</Button>
      <Button @click="save"  type="primary">支付</Button>
    </Row>
  </div>
</template>
<script>
  import { orderApi } from '@/api/order';
  export default {
    name: 'OrderPayForm',
    components: {
    },
    props: {
      //是否为更新表单
      isUpdate: {
        type: Boolean,
        default: true
      },
      //更新的表单数据对象
      updateData: {
        type: Object
      }
    },
    data() {
      return {
        roleList: {},

        //表单数据
        form: {
          //订单单号
          orderId:null,
          //价格
          price:38,
          //数量
          amout:1,
          //总价
          totalPrice:38,
          //备注
          remark:"服务",
          //会员卡号
          customerId:"散客",
          //付款方式
          payment:"微信",
          //经办人
          agent:"待选择",
          receivablePrice:null,
          discountPrice:"0",
          paidInPrice:null,
        },
        //表单验证
        formValidate: {
          //订单单号
          //orderId:[{ type:'number',required: true, message: '请输入订单单号', trigger: 'blur' }],
          //项目名称
          projectName:[{ required: true, message: '请输入项目名称', trigger: 'blur' }],
          //类型
          kinds:[{ required: true, message: '请输入类型', trigger: 'blur' }],
          //价格
          price:[{ type:'number',required: true, message: '请输入价格', trigger: 'blur' }],
          //数量
          amout:[{ type:'number',required: true, message: '请输入数量', trigger: 'blur' }],
          //总价
          totalPrice:[{ type:'number',required: true, message: '请输入总价', trigger: 'blur' }],
          //备注
          remark:[{ required: true, message: '请输入备注', trigger: 'blur' }],
          //会员卡号
          //customerId:[{ required: true, message: '请输入会员卡号', trigger: 'blur' }],
          //付款方式
          //payment:[{ required: true, message: '请输入付款方式', trigger: 'blur' }],
          //经办人
          //agent:[{ required: true, message: '请输入经办人', trigger: 'blur' }],
        },
        //类型下拉框数据
        kindsList : [
          {
            "price":339,
            "kinds":"烫发",
            "remark":"服务",
            "projectName":"造型"
          },
          {
            "price":38,
            "kinds":"洗剪",
            "remark":"服务",
            "projectName":"剪发"
          },
          {
            "price":58,
            "kinds":"洗剪吹",
            "remark":"服务",
            "projectName":"剪发"
          },
          {
            "price":238,
            "kinds":"染发",
            "remark":"服务",
            "projectName":"剪发"
          },
        ],
        agentList: [{
          value: 'hightStylist',
          label: "高级发型师",
          children: [{
            value: 'zhang10',
            label: "张十",
          }]
        }, {
          value: 'vipStylist',
          label: "VIP发型师",
          children: [{
            value: 'zhang11',
            label: "张十一",
          }]
        },
          {
            value: 'hightStylist',
            label: "发型师",
            children: [{
              value: 'zhang12',
              label: "张十二",
            }, {
              value: 'zhang13',
              label: "张十三",
            }]
          }]
      };
    },
    watch: {
      updateData: function(newValue, oldValue) {
        this.$refs['form'].resetFields();
        if (this.isUpdate) {
          for (let k in this.form) {
            this.$set(this.form, k, newValue[k]);
          }
          this.$set(this.form, 'id', newValue['id']);
        }
      },
      isUpdate: function(newValue, oldValue) {
        if (!newValue) {
          this.resetForm();
          this.$refs['form'].resetFields();
        }
      }
    },
    created() {
      this.asyncCardData();
    },
    mounted() {},
    methods: {
      setreceivablePrice() {
            this.form.receivablePrice = this.form.totalPrice - this.form.discountPrice
            this.form.paidInPrice = "全部使用" + this.form.payment + "收费" + this.form.receivablePrice + "元"
      },

      format (labels, selectedData) {
        const index = labels.length - 1;
        const data = selectedData[index] || false;
        // if (data && data.code) {
        //   this.form.agent =  labels[index] + ' - ' + data.code;
        //   return labels[index] + ' - ' + data.code;
        // }
        this.form.agent =  labels[index];
        return  labels[index];
      },


      // 获取当前日期的方法
      getProjectNum () {
        const projectTime = new Date() // 当前中国标准时间
        const Year = projectTime.getFullYear() // 获取当前年份 支持IE和火狐浏览器.
        const Month = projectTime.getMonth() + 1 // 获取中国区月份
        const Day = projectTime.getDate() // 获取几号
        var CurrentDate = String(Year)
        if (Month >= 10) { // 判断月份和几号是否大于10或者小于10
          CurrentDate += Month
        } else {
          CurrentDate += '0' + Month
        }
        if (Day >= 10) {
          CurrentDate += Day
        } else {
          CurrentDate += '0' + Day
        }
        this.form.orderId = CurrentDate + Math.floor(Math.random() * 10000)
      },

      selectKinds(){
        //console.log('kindsList',this.kindsList)
        const item = this.kindsList.find(item1=> item1.kinds === this.form.kinds)

        //console.log(item)
        this.form.price = item.price
        this.form.remark = item.remark
        this.form.projectName = item.projectName
        this.form.totalPrice = item.price * this.form.amout
      },
      cancel() {
        this.$emit('on-form-close');
      },
      save() {
        this.$refs['form'].validate(valid => {
          if (valid) {
            if (this.isUpdate) {
              this.update();
            } else {
              this.add();
            }
          } else {
            this.$Message.error('参数验证错误，请仔细填写表单数据!');
          }
        });
      },
      resetForm() {
        this.form = {
          //ID
          id:null,
          //订单单号
          orderId:null,
          //项目名称
          projectName:null,
          //类型
          kinds:null,
          //价格
          price:null,
          //数量
          amout:null,
          //总价
          totalPrice:null,
          //备注
          remark:null,
          //会员卡号
          customerId:null,
          //付款方式
          payment:null,
          //经办人
          agent:null,
        };
        this.$refs['form'].resetFields();
      },
      async add() {
        this.$Spin.show();
        let res = await orderApi.addOrder(this.form);
        this.$Message.success(res.msg);
        this.$Spin.hide();
        this.resetForm();
        this.$emit('on-form-close');
      },
      async update() {
        this.$Spin.show();
        let res = await orderApi.updateOrder(this.form);
        this.$Message.success(res.msg);
        this.$Spin.hide();
        this.resetForm();
        this.$emit('on-form-close');
      },
    }

  };


</script>
